<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const { $db, $global, $fn } = props.ujt;

const { searchSubmit } = $fn.useChannel(props);
</script>

<template>
    <slot :item="$global.location.query" :opt="{ searchSubmit }">
        <div v-if="props.opt?.channel && $db[props.opt.channel]?.sxs?.length" class="as-channel-search">
            <div class="as-channel-search-main">
                <input v-model="$global.location.query.ss" :placeholder="$fn.lg('asai.searchtips')" />
                <button @pointerdown="searchSubmit()">{{ $fn.lg('asai.search') }}</button>
            </div>
            <div class="as-channel-search-opt">
                <select v-model="$global.location.query.ssty">
                    <option v-for="item in $db[props.opt.channel].sss" :key="item"
                        :value="item === 'asai' ? undefined : item">
                        {{
                            item === 'asai'
                                ? $global.lang?.[$db[props.opt.channel].sn]?.sss
                                : $db[props.opt.channel].rfdata?.lang?.[item]
                        }}
                    </option>
                </select>
                <select v-model="$global.location.query.sx">
                    <option v-for="item in $db[props.opt.channel].sxs" :key="item"
                        :value="item === 'asai' ? undefined : item">
                        {{
                            item === 'asai'
                                ? $global.lang?.[$db[props.opt.channel].sn]?.sxs
                                : $db[props.opt.channel].rfdata?.lang?.[item]
                        }}
                    </option>
                </select>
                <select v-model="$global.location.query.sxty">
                    <option v-for="(item, index) in $global.lang?.[
                        $db[props.opt.channel].sn
                    ]?.sxtys" :key="'sxty' + index" :value="index == 0 ? undefined : index.toString()">
                        {{ item }}
                    </option>
                </select>
            </div>
        </div>
    </slot>
</template>

<style scoped lang="scss">
.as-channel-search {
    display: flex;
    width: 100%;
    flex-direction: column;

    .as-channel-search-main {
        display: flex;
        border: 1px solid var(--cm8);
        border-radius: 12px;
        overflow: hidden;

        input {
            display: block;
            min-width: 120px;
            padding: 0 12px;
            flex-grow: 1;
        }

        button {
            cursor: pointer;
            width: auto;
            min-width: 60px;
            padding: 0 12px;
            background-color: var(--cm8);
            color: var(--cm0);
        }
    }

    .as-channel-search-opt {
        display: flex;
    }
}
</style>
